<template>
	<view class="margin-sm">
		<!-- <view class="dflex-b">
			<image src="/static/images/user/default.png" class="border-radius-lg headimg" style="width: 66rpx; height: 66rpx;" mode="" @click="user"></image>
			<view class="flex1 margin-left-sm">
				<view class="bg-main border-radius-lg dflex" style="height: 76rpx; line-height: 76rpx;">
					<input type="text" placeholder="输入关键词" class="w-full padding-lr" />
					<view class="iconfont iconsousuo-01 bg-base border-radius-lg h-full padding-lr-xl" @click="search"></view>
				</view>
			</view>
		</view>
		<view class="margin-top">
			<scroll-view scroll-x class="ws-np">
				<view class="dflex padding-bottom-sm">
					<block v-for="(item,index) in ['全部','关注','推荐','服饰','箱包','鞋子','手机','家电','饰品']" :key="index" >
					<view class="pos-r padding-tb-sm margin-right-xs padding-lr diblock line-height-1 tac" :class="{active: title_id === index}" @click="pitch(index)">
						{{item}}
						<view class="badge" v-if="item == '关注'">2</view>
					</view>
					</block>
				</view>
			</scroll-view>
		</view> -->
		<view class="goodsContent border-radius">
			<view class="goodstList">
				<!-- <view class="bg-main margin-bottom-sm border-radius" style="height: 200rpx; background: #4645cf;">
					<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/d462f254-a1a6-4225-992c-f0658f6d4e0d.jpg" mode="widthFix"></image>
				</view> -->
				<block v-for="(item, index) in dynamicsList" class="goodItem" :key="index">
					<view class="bg-main margin-bottom-sm border-radius" @click="dongt(item._id)">
						<block>
							<image :src="item.imgs[0]" 
								style="max-width: 176px;max-height: 176px;" 
								class="flex1"
								mode="widthFix"></image>
						</block>
						<view class="padding-lr-sm margin-top-sm clamp-2">{{ item.title }}</view>
						<view class="dflex-b padding-lr-sm margin-tb-sm">
							<image src="/static/images/user/default.png" class="border-radius-c headimg" style="width: 50rpx; height: 50rpx;"></image>
							<view class="ft-dark margin-left-xs fs-xxs">{{ item.update_time }}</view>
							<!-- <view class="dflex">
								<view class="iconfont iconaixin"></view>
								<view class="clamp ft-dark margin-left-xs fs-xxs">355</view>
							</view> -->
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 置顶 -->
		<use-totop ref="usetop" :style="{ marginBottom: navHeight + 'px' }"></use-totop>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title_id: 0,
				dynamicsList: [],
				scrollTop: 0,
				navHeight: 0,
			};
		},
		onLoad() {
			this.loadData();
		},
		onPageScroll(e) {
			// this.scrollTop = e.scrollTop
			this.$refs.usetop.change(e.scrollTop);
		},
		onShareAppMessage: function () {
		    return {
		      title: '江小奕美妆',
		      desc: '美妆购物小程序',
		      path: '/pages/tabbar/category'
		    };
		},
		methods: {
			async loadData(callback) {
				let res = await this.$db['dynamics'].tolist();
				
				console.log('店铺动态列表：', res);
				this.dynamicsList = res.datas;
				
				this.dynamicsList.forEach(item => {
					item.update_time = this.formatTimestamp(item.update_time);
				});
				
				if (typeof callback === 'function') {
					// 数据加载完成回调函数
					callback();
				}
			},
			formatTimestamp(timestamp) {
				// console.log(timestamp, 'timestamp');
				if (!timestamp) {
					return '';
				} else {
					const date = new Date(timestamp);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
			
					return `${year}-${month}-${day}`;
				}
			},
			// 跳转个人
			user() {
				uni.navigateTo({
					url: `/pages/shopping/user`
				});
			},
			// 搜索
			search() {
				this.$api.msg('搜索')
			},
			pitch(index) {
				this.title_id = index
			},
			// 跳转详情页
			dongt(_id) {
				uni.navigateTo({
					url: `/pages/shopping/detail?id=${_id}`
				});
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F5;
	}

	.active {
		color: #ff6a6c;
		font-weight: bold;
		font-size: 34rpx;
	}

	.goodsContent {
		width: 100%;
		display: flex;
		justify-content: center;
		
		.ft-dark {
			color: #585858;
		}
	}

	.goodstList {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		width: 95%;
	}

	.goodItem {
		width: 100%;
		overflow: hidden;
	}

	.headimg {
		border: 2rpx solid #fff;
	}

</style>
